https://codepen.io/hereiscasio/pen/QZrBpP
#1 Text fields #2 Tabs
UI 圖來源件此
cols='auto'
的意義代表 v-col
會設成跟其內部所囊括的元件寬度相同,而另一個 v-col
的寬度就會佔用 v-row
中的剩下的寬度( cols='undefined'
,這你可以不用寫 )。若欲了解程式碼中的其它屬性,請直接移除該屬性看渲染結果,這樣學最快
附註:我並沒有完美處理這個背景圖在各個斷點的情況,因為那並非本系列文關注重點
<v-row no-gutters justify='center'>
<v-col cols='undefined'>
<v-text-field
class="mx-3 black--text" solo
:label="TEXT_PLACEHOLDER" :hint="TEXT_HINT" persistent-hint
></v-text-field>
</v-col>
<v-col cols='auto'>
<v-btn
v-text='"Search"'
large class="mt-0 mx-0" color="primary" height='48'>
</v-btn>
</v-col>
</v-row>